<template>
  <div class="Details">
    <div class="DetailInner">
      <img :src="FilmMsg.cover" alt="" />
      <div class="DetailMsg">
        <div class="setDetails">
          <span>{{ FilmMsg.name }}</span>
          <span>电影类型:{{ FilmMsg.type }}</span>
          <span>{{ FilmMsg.region }}/{{ FilmMsg.duration }}</span>
          <span>上映日期:{{ FilmMsg.releaseTime }} 上映</span>
        </div>
        <el-rate
          v-model="Star"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{ value }分"
        >
        </el-rate>
        <div class="button">
          <el-button type="danger" @click="gotoTicket">特惠购票</el-button>
          <el-button type="danger" @click="scoreVisible = true">评分</el-button>
        </div>
        <!-- 评分弹窗 -->
        <el-dialog
          title="提示"
          :visible.sync="scoreVisible"
          width="30%"
          class="score"
        >
          <!-- 弹窗内容 -->
          <div class="star">
            <el-rate v-model="MyScore.star" :colors="colors"> </el-rate>
          </div>
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="MyScore.content"
            resize="none"
          >
          </el-input>

          <!-- 弹窗底部 -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="scoreVisible = false">取 消</el-button>
            <el-button type="primary" @click="sendEvaluate()">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <router-view
      :msg="this.FilmMsg.introduction"
      @getFilmId="getFilmId"
      @getFilmEva="getFilmEva"
      :userEvaluations="this.userEvaluations"
      ref="Details"
    />
  </div>
</template>

<script>
import {
  getFilmDetailById,
  sendEvaluate,
  getFilmEvaluate,
} from "@/api/user.js";
import bus from "@/utils/busvue.js";
export default {
  name: "Details",
  data() {
    return {
      Id: "",
      scoreVisible: false,
      FilmMsg: {
        name: "XXXX",
        type: "科幻",
        region: "中国大陆",
        duration: "130",
        releaseTime: "2022年-01月-14日",
        cover: require("@/assets/Home/u2097.svg"),
        introduction: "",
      },
      Star: 0,
      MyScore: {
        star: 5.0,
        content: "",
      },
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      userEvaluations: [],
    };
  },
  methods: {
    gotoTicket() {
      this.$router.push({
        path: "/index/Details/FilmTicket",
        query: {
          id: this.Id,
        },
      });
    },

    getFilmDetail: function () {
      getFilmDetailById(this.$route.query.id).then((res) => {
        this.FilmMsg = res.data;
      });
    },
    sendEvaluate: function () {
      this.scoreVisible = false;
      let fid = this.FilmMsg.id;
      let uid = localStorage.getItem("uid");
      sendEvaluate(fid, uid, this.MyScore.content, this.MyScore.star).then(
        (res) => {
          if (res.code === 200) {
            this.$message({
              message: "评论成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "评论失败",
              type: "error",
            });
          }
        }
      );
      this.updateEva();
    },

    // 获取当前电影所有评论
    getFilmEva: function () {
      getFilmEvaluate(this.Id).then((res) => {
        this.userEvaluations = res.data;
        this.updateStar();
      });
    },
    updateStar() {
      // 计算当前电影star
      let sum = 0;
      for (let i = 0; i < this.userEvaluations.length; i++) {
        sum += this.userEvaluations[i].filmEvaluate.star;
      }
      let star = sum / this.userEvaluations.length;
      if (sum == 0) {
        star = 0;
      }
      this.Star = Number(star.toFixed(1));
    },
    updateEva: function () {
      bus.$emit("updateEva");
    },
    getFilmId: function (id) {
      this.Id = id;
    },
  },
  mounted() {
    this.getFilmDetail();
    this.getFilmEva();
  },
};
</script>

<style lang="less" scoped>
.Details {
  width: 100%;
  .DetailInner {
    width: 1440px;
    height: 400px;
    background-color: rgba(90, 132, 253, 1);
    margin: 0 auto;
    margin-top: 30px;
    position: relative;
    .DetailMsg {
      .button {
        position: absolute;
        left: 501px;
        top: 340px;
      }
      .button > .el-button {
        width: 128px;
      }
      .setDetails {
        position: absolute;
        left: 501px;
        top: 135px;
        display: flex;
        flex-direction: column;
        span {
          margin-bottom: 20px;
        }
        span:nth-child(1) {
          display: inline-block;
          width: 200px;
          font-size: 36px;
          font-weight: bold;
          padding-bottom: 10px;
        }
      }
    }
    .DetailMsg > .el-rate {
      position: absolute;
      top: 150px;
      left: 710px;
    }
  }
  .DetailInner > img:nth-child(1) {
    width: 240px;
    position: absolute;
    left: 189px;
    top: 120px;
  }
}
.score {
  position: relative;
  .star {
    position: absolute;
    left: 30px;
    top: 60px;
  }
}
</style>